<template>
  <div class="topic-card__wrap" v-if="cardId">
    <div class="topic-card" @click="activeRouteFunc?changeRoute(cardName):null">
      <div class="topic-card-left">
        <div class="square1" v-if="!topicIcon"></div>
        <div class="square2" v-if="!topicIcon"></div>
        <div class="square3" v-if="!topicIcon"></div>
        <div class="square4" v-if="!topicIcon"></div>
        <img :src="topicIcon" v-if="topicIcon" alt="">
      </div>
      <div class="topic-card-right">
        <div class="right-header">
          <span class="right-title"># {{cardName}} #</span>
          <span class="right-label1" v-if="!followedTopic&&!from&&userId!==$store.state.userProfile.userId" @click.stop="dataPostFollowTopic">
            <span v-if="!loading">+</span>
            <yun-icon v-if="loading" name="loading" size="12"> </yun-icon>
            关注
          </span>
          <span class="right-label3" v-if="!followedTopic&&!from&&userId===$store.state.userProfile.userId" >
            我的话题
          </span>
          <span class="right-label2" v-if="showFollowedTopic" @click.stop="dataDeleteFollowTopic" >
            <yun-icon v-if="!loading" name="right" size="12"></yun-icon>
            <yun-icon v-if="loading" name="loading" size="12"> </yun-icon>
            已关注
          </span>
        </div>
        <p class="right-content">{{cardIntro}}</p>
        <p class="right-footer">{{cardNum1}}讨论</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {dateConvert} from "../../action/utils/dataConvert";
  import {globalBus} from "../common/globalBus";
  import config from "../../action/config";


  export default {
  name: 'topicCard',

  props:{
    activeRouteFunc:{
      type:Boolean,
      default:true
    },
    info:{
      type:Object,
      default:()=>({})
    },
    from:{
      type:String,
      default:''
    }
  },


    computed:{
      showFollowedTopic(){
          return !!(this.followedTopic || this.from==='notice');

      }
    },
  data(){
    return{
      isPhoto: true,
      src: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
      focus: '+关注',
      fontColor: '#55B946',
      cardName:'',
      cardIntro:'',
      cardId:'',
      cardTags:[],
      cardTime:'',
      cardNum1:'',
      topicIcon:'',
      loading : false,
      followedTopic:false
    }

  },



  created(){
   this.dateGet2Info();
  },
  methods:{
    handleFocus(){
      this.focus = this.focus === '+关注' ? '取消关注' : '+关注';
      if (this.fontColor === '#55B946') {
        this.fontColor = '#999'
      } else {
        this.fontColor = '#55B946'
      }
    },
    dateGet2Info(){
      let info = this.info;
      if(this.info.topicId){
        this.cardName = info.topicName;
        this.cardIntro = info.topicDescrption;
        this.cardId = info.topicId;
        this.userId = info.userId;
        this.src = info.cover;
        this.topicIcon = info.topicIcon;
        this.cardTags = info.tags;
        this.cardTime = dateConvert(info.createTime);
        this.cardNum1 = info.referenceCount;
        this.followedTopic = info.followedTopic;

      }
      if(this.info.itemId){
        this.cardName = info.title;
        this.cardIntro = info.description;
        this.cardId = info.itemId;
        this.src = info.cover;
        this.cardNum1 =info.extra? info.extra.referenceCount:'';
        this.cardTime = dateConvert(info.createTime);
      }
    },
    changeRoute(r){
      let routeUrl = this.$router.resolve({
        path: "/topic/detail/"+r
      });
      window.open(routeUrl.href,'_blank')
    },

    dataPostFollowTopic(){
      this.loading = true;
      this.$axios.$post(config.api.post.Topic.follow+this.cardId+'/follower').then((response)=>{
        if(response.code===0){
          this.$message({
            type:'success',
            message:'关注成功'
          })
          this.followedTopic = true;
        }else{
          this.$message({
            type:'info',
            message:'请在登陆后操作'
          })

        }
        this.loading = false;
      })
    },

    dataDeleteFollowTopic(){
      this.loading = true;

      this.$axios.$delete(config.api.post.Topic.follow+this.cardId+'/follower').then((response)=>{
        this.loading = false;

        if(response.code===0){
          this.$message({
            type:'success',
            message:'取消关注成功'
          })
          if(this.from==='notice'){
            this.cardId = ''
          }

          this.followedTopic = false;

        }else{
          this.$message({
            type:'info',
            message:'请在登陆后操作'
          })
        }

      })
    }
  },
    watch:{
    info(val){
      this.dateGet2Info();
    }
    }
}
</script>

<style lang="scss" scoped>
  .topic-card__wrap{
    background-color: #fff;
    padding: 24*$length 24*$length 0 24*$length;
    .topic-card{
      @extend %cursorPointer;
      padding-bottom: 24*$length;
      border-bottom:1px dashed #EFEFEF;
      @extend %flex-row-spb;
      justify-content: flex-start;
      align-items: start;
      .topic-card-left{
        width: 100*$length;
        height: 100*$length;
        @extend %flex-row-spb;
        flex-wrap: wrap;
        flex-shrink:0;
        img{
          border-radius: 6*$length;
          max-width: 100*$length;
          max-height: 100*$length;
          object-fit: contain;
        }
        div{
          display: inline-block;
          width: 48*$length;
          height: 48*$length;
          background-color: orange;
          @include border-radius(4*$length);
        }
        .square1{
          background-color: #B4DDDE;
        }
        .square2{
          background-color: #E0BDBD;
        }
        .square3{
          background-color: #9FBBC9;
        }
        .square4{
          background-color: #A6E2B6;
        }
      }
      .topic-card-right{
        margin-top: 20*$length;
        margin-left: 16*$length;
        text-align: left;
        .right-header{
          .right-title{
            margin-right: 23*$length;
            @include fontStyle(14,14,500,#333,left);
          }
          .right-label1{
            @include fontStyle(14,20,500,#55B946,left);
          }
          .right-label2{
            @include fontStyle(14,20,500,#666,left);
          }
          .right-label3{
            @include fontStyle(12,20,500, #9FBBC9,left);
          }
        }
        .right-content{
          margin-top: 8*$length;
          @include fontStyle(12,17,500,#999,left);
          height: auto;
        }
        .right-footer{
          margin-top: 7*$length;
          @include fontStyle(12,17,500,#999,left);
        }
      }
    }
  }
</style>
